bitmap fonts bitmap fonts aren’t really fonts bitmap fonts are bitmap images used to replace predefined dynamic content like dates, time, and weather in text and digital clock components you can replace numbers, punctuation, clock and calendar abbreviations, or characters/words in different languages bitmap fonts can also be combined with other features of galaxy watch studio gws to add custom functionality for example, using bitmap fonts, you can create unique styles for numbers or letters that can’t be done using fonts use custom images for weather, health, or moon phase add predefined terms in a language not supported by a gws feature or on the phone replace a word in a digital clock component for more than one language change font color by tapping it note when you import images as bitmap fonts into gws, they are saved as png files as part of the watch face project if you update the original image on your system , it will not affect the image in your project if you update the original image and want to use it in your watch face, you will need to re-import the new image into your project bitmap font images cannot be resized in gws create a digital watch that uses pictographs this example is a simple replacement of numbers and predefined date values with images within a digital clock component this watch face shows two digital clock components whose icu format is set to “mmm d eee” where “mmm” is the abbreviated month, “d” is the numerical day of the month, and “eee” is the abbreviated day of the week the upper digital clock uses the default truetype fonts the lower digital clock uses bitmap fonts for months of the year, numbers, and days of the week to create the lower digital clock, do the following in your favorite drawing program, create images for months of the year, numbers for the days of the month , and days of the week because you cannot resize these images in gws, images should be the same or similar height you may want to test images of different heights before creating all of your images in this example, the numbers have a height of 30px and the pictographs have a height of 50px tip if you want some space between the images that make up the digital clock, add some blank space on the right of the month images and on the left of the days of the week images start a new gws project and add a digital clock component in the type section of the properties window, set icu format to “mmm d eee” in the appearance section of the properties window a select bitmap font then click bitmap font setting b in the digit tab, set the numbers click to import an image for each digit c click the other tab and set the predefined clock and calendar abbreviations click to import an image for each item d click ok note if you do not enter an image for a value and that value is used by the component, nothing is displayed for that value in the watch face for example, if you do not assign an image to the number 1 and the time is 12 15, then the digital clock will display 2 5 add a background that will make your images stand out on the watch face information a background component is always added as the bottom or lowest layer in your design use custom images for weather, health, or moon phase weather, health, and moon phase components display dynamic predefined content you can replace this content using bitmap fonts the weather type text component has five different display types main, icon, description, number, and id the icon display type cannot be customized using bitmap fonts however, the main, description, number, and id display types can be customized using bitmap fonts you can configure one of these display types to display customized weather icons this example shows all five display types and their values when the weather is clear the image on the bottom is the id display type configured to display a custom icon for a list of the predefined values provided by openweather and an example of how to display custom weather icons, see weather this watch face shows the moon phase type, step count, and heart rate bpm text components on the left, the components use the default configuration on the right, the step count and heart rate components have been customized to show an icon rather than the units of measurement steps and bpm the moon phase type component is used as the background of the watch face to create the customized moon phase type, step count, and heart rate components, do the following in your favorite drawing program, create the following you cannot resize these images in gws images for numbers for the step counts and heart rate components the numbers should be the same height you can use the same images for both components or create different ones for each component in this example, the numbers all have a height of 30px images for the units of measurement for the step counts and heart rate components in this example, the height of these images are the same height as the numbers 30px tip if you want some space between the numbers and the icon in the watch face, add some empty space on the left side of these images * images of the moon phase types there are a total of eight moon phase types see faq [q 14 how do i use the moon phase and position?][9] for more information because these images are being used as a background for the watch face, they are 360 x 360 px the size of the watch face start a new gws project and add a moon phase type text component position the moon phase component in the center of the watch face in the appearance section of the properties window a select bitmap font then click bitmap font setting b in the digit tab, set the numbers click to import an image for numbers 0 - 7 click ok add an image component that is the background for the step count and heart rate to make the content stand out position the image in the watch face by dragging and dropping it to the desired location add a step counts component position the step counts component in the watch face by dragging and dropping it to the desired location in the appearance section of the properties window a select bitmap font then click bitmap font setting b in the digit tab, set the numbers click to import an image for each digit c in the custom tab, select add text string and enter the image for the “steps” unit of measurement the text string is case-sensitive click ok add a heart rate bpm text component position the heart rate component in the watch face by dragging and dropping it to the desired location in the appearance section of the properties window a select bitmap font then click bitmap font setting b in the digit tab, set the numbers click to import an image for each digit c in the custom tab, select add text string and enter the image for the “bpm” unit of measurement the text string is case-sensitive click ok add a language not supported by a watch feature or a phone many gws components display dynamic or static content that are only available in english or, some components offer other languages, but they may not provide the language you want using bitmap fonts, you can translate these items to a language that is not supported for example, the weather type text component displays a single-word description of the weather, in english only the main display type using bitmap fonts, you can display this information in any language this watch face shows three weather type text components the leftmost component is the icon display type, which cannot be customized the upper component is the main display type and uses truetype fonts and it can only be displayed in english the lower component is the main display type and uses bitmap fonts to show the weather in greek to create the greek weather type component, do the following in your favorite drawing program, create images for each of the greek translations for the english main display type for a list of the english main display types, see weather the images should be the same height you cannot resize these images in gws in the examples, the greek word images have a height of 50px start a new gws project and add a weather type text component if a warning window displays, read and acknowledge that the listed features and components cannot be used when this weather type component is used click ok position the weather component in the watch face by dragging and dropping it to the desired location in the appearance section of the properties window a select bitmap font then click bitmap font setting b in the custom tab, select add text string and enter a main display type in english repeat this step for every main display type note values entered are case-sensitive that is, if you enter “snow” instead of “snow” , nothing is displayed in the watch face when the weather type is snow c click ![] https //d3unf4s5rp9dfh cloudfront net/glxywatchdesign_doc/add_bitmap_icon png to import an image for each text string ![] https //d3unf4s5rp9dfh cloudfront net/glxywatchdesign_doc/example_3_greekweatherexample_5 png d click **ok** <div class="alert alert-info" role="alert"><strong>note</strong> <p>if you do not enter a value or an image for a value and that value is used by the component, nothing is displayed for that value in the watch face for example, if you do not add the value fog, if the weather type is fog, nothing is displayed in the watch face </p> add a background that will make your images stand out on the watch face note a background component is always added as the bottom or lowest layer in your design ![] https //d3unf4s5rp9dfh cloudfront net/glxywatchdesign_doc/example_3_greekweatherexample_6 png replace a word for more than one language digital clock component in a digital clock component, you can select one or more languages in which the information will display on the watch face the language displayed is determined by the language setting of the paired phone if you have selected more than one language, you can replace the same word or words, language by language, using bitmap fonts this watch face displays the day of the week the languages set for the digital clock component are korean, russian, and vietnamese the language displayed depends on the language setting of the phone in your favorite drawing program, create images for the days of the week make sure the images fit in the watch face you cannot resize these images in gws start a new gws project and add a digital clock component in the type section of the properties window, set icu format to “eeee” where “eeee” is the full name of the day of the week in the appearance section of the properties window a select bitmap font then click bitmap font setting b in the custom tab, select add text string and enter the day of the week in one of the languages repeat this step for every day of the week for each language note values entered are case-sensitive that is, if you enter “thứ năm” instead of “thứ năm” and the day of the week is thursday thứ năm , nothing is displayed in the watch face paired with a phone whose language setting is vietnamese c click ![] https //d3unf4s5rp9dfh cloudfront net/glxywatchdesign_doc/add_bitmap_icon png to import an image for each text string ![] https //d3unf4s5rp9dfh cloudfront net/glxywatchdesign_doc/example_4_multilanguageexample_8 png d click **ok** <div class="alert alert-info" role="alert"><strong>note</strong> <p>if you do not enter a value or an image for a value and that value is used by the component, nothing is displayed in the watch face for example, if you do not add a value for 금요일 friday in korean , if the day of the week is friday, nothing is displayed in the watch face that is paired with a phone whose language setting is korean </p> change font color by tap have you ever wanted to design a watch face that dynamically changes the color of a word or number by tapping it? unfortunately, gws does not directly provide this feature however, you can use bitmap fonts along with a tappable image to create this action this watch face is a digital clock whose numbers have been replaced by bitmap fonts the bitmap font numbers are transparent the digital clock component is layered above an image of a single color the image has been set as a button and changes images when tapped in your favorite drawing program, create the following images for numbers and a colon these should be transparent on a background that matches the background you will use for your watch face the images will look like stencils the numbers should be the same height and width the colon should be the same height you cannot resize these images in gws in this example, the numbers are 38px x 50px and the colon is 15px x 50px images of the colors you want to use for the numbers in your watch tip if you are using solid colors, make the images 2px x 2px after you import them, you can resize them using smaller images will minimize the size of your project start a new gws project and add a digital clock component in the appearance section of the properties window a select bitmap font then click bitmap font setting b in the digit tab, set the numbers click to import an image for each digit c click the symbol tab, and set the image for the colon click to import the image d click ok add the image of one of the colors move and resize it to exactly cover the digital clock you can enlarge the image in the preview window to precisely resize the image move the color image to the layer below the digital clock component in gws’s layer area, select the image, then drag and drop it on the digital clock component in the properties window of the image the image must be selected , select set as button from the dropdown menu in the action tab of the properties window, click on the action and select change image click to add more images of different colors add a background to the watch face that matches the background of the numbers in the run window, click on the digital clock to change the colors if your digital watch has stripes on either side of the time, it may be because the width of your bitmap images are not the same in the picture below, the width for the image of the number 1 is 22px while the other numbers are 38px or the color image is longer than the digital clock component note you should always test your design on an actual watch to make sure all components are positioned correctly about custom bitmap font text strings when entering custom bitmap font text strings, consider the following text is case-sensitive within gws gws saves the image and names the file based on the text string therefore, if you enter text strings that are the same but with different capitalization, only one image is saved that is, if you enter both “cloud” and “cloud,” you will only be able to use one image for both strings this is because file naming on your pc windows or macos is not case-sensitive text is character-based and supports multiple languages text will replace full words or substrings returned by the component only the text entered is replaced; all other content returned by the component that does not match the configured text strings will not be replaced and is not displayed after you have saved and exited your project, when you re-open the project and the bitmap font settings window, in the custom tab, the text strings will be re-ordered in the precedence that they will be replaced if you have entered the same text strings with different capitalization, in order to change the image used by all instances of these text strings, you must re-import the image for the last instance it is the image set for the last instance that is used by all other instances in order for the re-imported image to appear in gws, you must save your project, exit gws, then re-launch gws for example, if you enter “cloud,” “cloud,” and “cloud” in this order , “cloud” is the last instance and the image imported for it will be used by “cloud” and “cloud” after you re-open the project if you want to change the image used by these strings, you must re-import the image for “cloud ” if you want to see this change in gws, you must save your project, exit gws, and then re-launch gws if you don’t exit gws and simply re-open the project, the image reverts back to the previous image however, when you exit and re-launch gws, the image will change to the re-imported image for example, if you configured a normal text component with the following bitmap fonts for “cloud,” “loud,” “y,” and “구름,” here is what displays when “cloud,” “cloud,” “cloudy,” “clouds,” “aloud,” and “구름” are entered into that text component here is how the text strings are re-ordered in the custom tab area after a project has been saved and re-opened how to re-import a bitmap font image if you have updated an image and want to replace an existing bitmap font image in your watch face design, open the bitmap font setting window, select the tab where the image is set, and click on the image that needs to be updated